<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户管理后台系统 - 用户列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        #layui-table-page1 {
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" >
        <div class="layui-logo layui-hide-xs layui-bg-black">用户管理后台系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    {:session('username')}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/admin/logout">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="/admin/baseinfo/index">用户列表</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="text" name="student" id="student" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                    <button class="layui-btn" id="search">立即提交</button>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layui-bg-blue" onclick="addData()">添加</button>
                </div>
            </div>

            <table id="table"></table>

        </div>
    </div>

</div>
<script src="/layui/layui.js"></script>
<script>
    var tableRender = null;
    var openIndex = null;
    layui.use(['table', 'jquery'], function(){
        var table = layui.table;
        var $ = layui.jquery;

        //第一个实例
        tableRender = table.render({
            elem: '#table'
            ,height: 600
            ,method: 'post'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }
            ,url: '/admin/baseinfo/lists' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true}
                ,{field: 'student', title: '姓名', width: 100, sort: true}
                ,{field: 'uuid', title: '身份证', width:120, sort: true}
                ,{field: 'serial', title: '学号', width:100, sort: true}
                ,{field: 'phone', title: '联系电话', width: 100, sort: true}
                ,{field: 'address', title: '家庭联系地址', width: 200, sort: true}
                ,{field: 'guardian', title: '监护人', width: 100, sort: true}
                ,{field: 'note', title: '状态', width: 100, sort: true, templet: function (data) {
                    if (data.status === 0) {
                        return '上课中';
                    } else if (data.status === 1) {
                        return '休息中';
                    } else {
                        return '放假中';
                    }
                }}
                ,{field: 'note', title: '备注', width: 100}
                ,{field: 'create_time', title: '创建时间', width: 160, sort: true}
                ,{title: '操作',align:'center', minWidth: 120, templet: function (data) {
                    return '<a class="layui-btn layui-btn-xs" lay-event="edit" onclick="editData('+data.id+')">编辑</a>\n' +
                        '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="deleteData('+data.id+')">删除</a>'
                }}
            ]]
        });

        $('#search').click(function(data){
            // 在这里处理登录逻辑
            tableRender.reload({
                where: {student: $("#student").val()}
            })
        });
    });

    function addData() {
        layui.use(['layer', 'jquery'], function(){
            var layer = layui.layer;
            var $ = layui.jquery;
            openIndex = layer.open({
                type: 2,
                title: '添加用户',
                shadeClose: true,
                shade: 0.8,
                area: ['680px', '730px'],
                content: '/admin/baseinfo/add', // 这里是要打开的弹窗页面
            });
        });
    }

    function editData(id) {
        layui.use(['layer', 'jquery'], function(){
            var layer = layui.layer;
            var $ = layui.jquery;
            layui.use(['layer', 'jquery'], function(){
                var layer = layui.layer;
                var $ = layui.jquery;
                openIndex = layer.open({
                    type: 2,
                    title: '添加用户',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['680px', '730px'],
                    content: '/admin/baseinfo/edit?id='+id, // 这里是要打开的弹窗页面
                });
            });
        });
    }

    function closeOpen() {
        layui.use(['layer'], function(){
            var layer = layui.layer;
            layer.close(openIndex);
            layer.msg('操作成功');
            tableRender.reload();
        });
    }

    function deleteData(id) {
        layui.use(['layer', 'jquery'], function(){
            var layer = layui.layer;
            var $ = layui.jquery;
            var openIndex = layer.confirm('确定删除用户数据？', {
                btn: ['确定', '取消']
            }, function(index, layero){
                $.post('/admin/baseinfo/delete', {id: id}, function (res) {
                    if(parseInt(res.code) === 200) {
                        layer.close(openIndex);
                        layer.msg('删除成功');
                        tableRender.reload();
                    } else {
                        layer.msg(res.message);
                        return false;
                    }
                }, 'json');
            });
        });
    }
</script>
</body>
</html>